<template>
    <div>
        <div style="font-size:0.24rem">
            <h2>API</h2>
            <table>
                <tr>
                    <th>参数</th>
                    <th>说明</th>
                    <th>类型</th>
                    <th>可选</th>
                    <th>默认</th>
                </tr>
                <tr>
                    <td>value</td>
                    <td>日期值</td>
                    <td>Date</td>
                    <td>-</td>
                    <td>-</td>
                </tr>
                <tr>
                    <td>type</td>
                    <td>日期类型</td>
                    <td>String</td>
                    <td>datetime<br>date<br>time<br>smart</td>
                    <td>datetime</td>
                </tr>
                <tr>
                    <td>visibleItemCount</td>
                    <td>显示的行数</td>
                    <td>Number</td>
                    <td>-</td>
                    <td>5</td>
                </tr>
                <tr>
                    <td>startDate</td>
                    <td>开始时间</td>
                    <td>Date</td>
                    <td>-</td>
                    <td>十年前（smart模式：当天）</td>
                </tr>
                <tr>
                    <td>endDate</td>
                    <td>结束时间</td>
                    <td>Date</td>
                    <td>-</td>
                    <td>十年后（smart模式：俩月后）</td>
                </tr>
                <tr>
                    <td>startHour</td>
                    <td>开始时</td>
                    <td>Number</td>
                    <td>-</td>
                    <td>0</td>
                </tr>
                <tr>
                    <td>endHour</td>
                    <td>结束时</td>
                    <td>Number</td>
                    <td>-</td>
                    <td>23</td>
                </tr>
                <tr>
                    <td>yearFormat<br>monthFormat<br>dateFormat<br>hourFormat<br>minuteFormat</td>
                    <td>格式化</td>
                    <td>String</td>
                    <td>-</td>
                    <td>'{value}'</td>
                </tr>
                <tr>
                    <td>cancelText</td>
                    <td>取消按钮文本</td>
                    <td>String</td>
                    <td>-</td>
                    <td>'取消'</td>
                </tr>
                <tr>
                    <td>confirmText</td>
                    <td>确定按钮文本</td>
                    <td>String</td>
                    <td>-</td>
                    <td>'确定'</td>
                </tr>
                <tr>
                    <th>slots</th>
                    <th colspan="4">说明</th>
                </tr>
                <tr>
                    <td>-</td>
                    <td colspan="4">-</td>
                </tr>
                <tr>
                    <th>events</th>
                    <th colspan="4">说明</th>
                </tr>
                <tr>
                    <td>confirm</td>
                    <td colspan="4">选择后的返回值（类型：Date）</td>
                </tr>
            </table>
        </div>
        <div class="demo-show">
            <h2>demo</h2>
            <div @click="open('picker1')">type:datetime</div>
            <div @click="open('picker2')">type:date</div>
            <div @click="open('picker3')">type:time</div>
            <div @click="open('picker4')">type:date (format)</div>
            <div @click="open('picker5')">type:smart</div>
        </div>

        <pic ref="picker1" type="datetime" @confirm="shure" :value="valueDate"></pic>
        <pic ref="picker2" type="date" @confirm="shure" :value="valueDate"></pic>
        <pic ref="picker3" type="time" @confirm="shure" :value="valueDate"></pic>
        <pic ref="picker4" type="date" @confirm="shure" year-format="{value} 年" month-format="{value} 月" date-format="{value} 日" :value="valueDate"></pic>
        <pic ref="picker5" type="smart" :visibleItemCount="3" @confirm="shure" :value="valueDate"></pic>

    </div>
</template>
<script>
import pic from '@/components/picker/dateTime-picker.vue';
export default {
    name: 'temp2',
    components: {pic},
    data () {
        return {
            valueDate: new Date()
        };
    },
    methods: {
        open (picker) {
            this.valueDate = new Date();
            this.$refs[picker].open();
        },
        shure (data) {
            console.log(data);
        }

    }
};
</script>
<style>
.demo-picker-show{background-color: #FFF;margin-top: 0.3rem;}
.demo-picker-show div,.demo-show h2{text-align: center;padding: 0.2rem;}
</style>
